<template xmlns:position="http://www.w3.org/1999/xhtml">
  <!--  头部信息区-->
  <div class="tb-div">
    <span>床位信息</span>


    <div style="display: flex ;margin-left: 100px">
      <div class="cw-div-mar">
        <span style="font-size: 14px" class="cw-div-zcw">总床位</span>
      </div>
      <div class="cw-div-mar">
        <span style="font-size: 14px" class="cw-div-zcw">总床位</span>
      </div>
      <div class="cw-div-mar" >
        <span style="font-size: 14px" class="cw-div-zcw">总床位</span>
      </div>
      <div class="cw-div-mar">
        <span class="cw-div-zcw">总床位</span>
      </div>
    </div>

    <div style="display: flex;margin-left: 100px">
      <div class="cw-div-mar">
        <span class="cw-div-span">本月挂号总量</span>
        <span style="font-size: 14px;">个</span>
      </div>
      <div class="cw-div-mar">
        <span class="cw-div-span">本月挂号总量</span>
        <span style="font-size: 14px;">个</span>
      </div>
      <div class="cw-div-mar">
        <span class="cw-div-span">本月挂号总量</span>
        <span style="font-size: 14px;">个</span>
      </div>
      <div class="cw-div-mar">
        <span class="cw-div-span">本月挂号总量</span>
        <span style="font-size: 14px;">个</span>
      </div>
      <div>
        <el-progress type="dashboard" :percentage="100" class="el-progress"  :stroke-width="5"
                      :width="80" :height="80">二院</el-progress>
        <el-progress type="dashboard" :percentage="100" class="el-progress"  :stroke-width="5"
                      :width="80" :height="80">二院</el-progress>
        <el-progress type="dashboard" :percentage="100" class="el-progress"  :stroke-width="5"
                      :width="80" :height="80">二院</el-progress>
        <el-progress type="dashboard" :percentage="100" class="el-progress"  :stroke-width="5"
                      :width="80" :height="80">二院</el-progress>

      </div>
    </div>

    <div>
      <el-card :style="{ margin:'0px 50px', 'overflow': 'hidden'}" >
        <el-form :inline="true">
          <el-form-item>
            <el-button >全部</el-button>
          </el-form-item>
          <el-form-item>
            <el-button >已使用</el-button>
          </el-form-item>
          <el-form-item>
            <el-button >未使用</el-button>
          </el-form-item>
          <el-form-item>
            <el-button >维修中</el-button>
          </el-form-item>
          <el-form-item>
            <el-select placeholder="选择院区" style="width: 150px"></el-select>
          </el-form-item>
          <el-form-item>
            <el-select placeholder="选择病区位置" style="width: 150px"></el-select>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="输入关键字" style="width: 150px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="selectAll">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="margin-left: 50px">新建床位</el-button>
          </el-form-item>
        </el-form>

        <el-table style="margin-top: 20px;font-size: 12px;">
          <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="brand" label="病区" align="center"/>
          <el-table-column prop="license" label="床位号" align="center"/>
          <el-table-column prop="code" label="床位类型" align="center"/>
          <el-table-column prop="type" label="床位状态 " align="center" :formatter="vehicleTypeFormatter"/>
          <el-table-column prop="price" label="患者姓名" align="center"/>
          <el-table-column prop="buyTime" label="入住时间" align="center"/>
          <el-table-column prop="regTime" label="责任医师" align="center"/>
          <el-table-column prop="batteryType" label="责任护士" align="center" :formatter="batteryTypeFormatter"/>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="editVehicle(scope.row.id)">详情</el-button>
              <el-button link type="primary" size="small" @click="deleteVehicle(scope.row.id)">管理</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>


  </div>

</template>

<script setup>
//控制弹窗标题
import {ref} from "vue";

const dialogTitle = ref("新增预约挂号单");
//控制新增挂号单弹窗是否显示
const addApplicationDialogVisible = ref(false);

</script>

<style scoped>
/*头部信息文字*/
.tb-div{
  height: 6vh;background-color:#fff;padding:10px 20px;line-height:60px;font-size:16px;
}
/*床位总览文字样式*/
.cw-div-span{
  font-weight:bold;font-size:18px; color:#000000D3;
}
/*床位总览文字div间距*/
.cw-div-mar{
  width: 200px;
  margin-left: 15px;
  display: flex;
}
/*总床位样式*/
.cw-div-zcw{
  position:relative;
  top: 22px;
  font-size: 14px;
}
/*仪表进度条*/
.el-progress{
  position:relative;
  margin: 0 5px;
  bottom: 50px;
  font-size: 12px;
}


</style>